<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>ripple dot</title>
  <style>
.example {
  position:relative;
  margin:150px auto;
  width:50px;
  height:50px;
}
.dot:before{
  content:' ';
  position: absolute;
  z-index:2;
  left:0;
  top:0;
  width:10px;
  height:10px; 
  background-color: black;
  border-radius: 50%;
}

.dot:after {
  content:' ';
  position: absolute;
  z-index:1;
  width:10px;
  height:10px; 
  background-color: black;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
  -webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
  -webkit-animation-duration: 1.5s;/*动画持续时间*/
  -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
  -webkit-animation-delay: 0s;/*动画延迟时间*/
  -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
  -webkit-animation-direction: alternate;/*定义动画方式*/
}

@keyframes ripple {
   0% {
    left:5px;
    top:5px;
    opcity:75;
    width:0;
    height:0;
  }
  100% {
    left:-20px;
    top:-20px;
    opacity: 0;
    width:50px;
    height:50px;
  }
}

.example2 {
  position:relative;
  margin:150px auto;
  width:50px;
  height:50px;
}
.dot2:before{
  content:' ';
  position: absolute;
  z-index:2;
  left:0;
  top:0;
  width:10px;
  height:10px; 
  background-color: #ff4200;
  border-radius: 50%;
}

.dot2:after {
  content:' ';
  position: absolute;
  z-index:1;
  width:10px;
  height:10px; 
  background-color: #ff4200;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
  -webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
  -webkit-animation-duration: 1s;/*动画持续时间*/
  -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
  -webkit-animation-delay: 0s;/*动画延迟时间*/
  -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
  -webkit-animation-direction: normal;/*定义动画方式*/
}

@keyframes ripple {
   0% {
    left:5px;
    top:5px;
    opcity:75;
    width:0;
    height:0;
  }
  100% {
    left:-20px;
    top:-20px;
    opacity: 0;
    width:50px;
    height:50px;
  }
}
</style>
</head>
<body style="width: 200px;">
<!-- partial:index.partial.html -->
<div class="example2">
  <div class="dot2"></div>
</div>
<!-- partial -->
<!-- partial:index.partial.html -->
<div class="example">
  <div class="dot"></div>
</div>
<!-- partial -->
</body>
</html>